디자인설계 (2)

--custom hook--
	const {
    searchFilterParams,
    valueParam,
    selectTab,
    resetSearcFilterParams,
    setChangeSearchParams,
    onValueParamChange,
    onSelectTab,
    onResetFilter,
    onSearch,
    isParamsLoading,
  } = useSearchFilter<NoticeParamsType>(initData)
  
    useEffect(() => {
    return () => {
      resetSearcFilterParams()
    }
  }, [])
 
------ ui -----
return (
	<FilterItem label="Keyword">
     <div className="grid6">
        <SearchIcoInput
          uiType="addSelect"
          clearValue={() => onValueParamChange('', 'keyword')}
          onSearchClick={() => onSearch('keyword')}
          onSearch={(event) => onSearch(event, 'keyword')}
          value={valueParam || ''}
          onChangeSearch={onValueParamChange}
          placeholder="Enter keyword"
         >
           <SelectMui
            value={selectTab?.keywordTab || ''}
            placeholder="Select"
            size="full"
            onChange={(event) => onSelectTab(event, 'keywordTab')}
            options={optionList}
            uiType="multi"
            />
     	</SearchIcoInput>
     </div>
	 </FilterItem>
       <ButtonMui
		     size="xsmall"
		     type="outlined"
		     color="gray"
		     uiType="reset_btn"
		     icon="ResetIcon"
		     iconStyle={{ width: 20, height: 20, fill: '#354165' }}
		     onClick={() => onResetFilter(initData)}
       />
  --- 생략 ----
)